<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#root button{
			padding:5px;
			margin:5px;
		}
		#root button.active{
			background:red;
		}
		#root div{
			width: 500px;
			height: 300px;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<div id="root">
		<button>体育</button>
		<button>娱乐</button>
		<button>财经</button>
		<div>体育新闻</div>
		<div>娱乐新闻</div>
		<div>财经新闻</div>
	</div>
</body>
<script>
	// const btns = document.querySelectorAll("button");
	// 1- 有问题：点击都是3
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	// 2- 使用闭包
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			console.log(i);
	// 		}
	// 	})(i);
	// }
	// 3 - let
	// for(let i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		console.log(i);
	// 	}
	// }
	
	// 4- forEach
	// const btns = document.querySelectorAll("button");
	// const divs = document.querySelectorAll("#root div");
	// let index = 0;// 记录当前被选中的下标
	// btns[index].className = "active";
	// btns.forEach(function(btn,i){
	// 	divs[i].style.display = "none";
	// 	btn.onclick = function(){
	// 		if(index === i) return;
	// 		btns[index].className = null;
	// 		divs[index].style.display = "none";
	// 		this.className = "active";
	// 		divs[i].style.display = "block";
	// 		index = i;
	// 	}
	// })
	// divs[index].style.display = "block";
	
	
	// 优化：
	const btns = document.querySelectorAll("button");
	const divs = document.querySelectorAll("#root div");
	let index = 0;// 记录当前被选中的下标
	init();
	function init(){
		btns.forEach(function(btn,i){
			hide(i);
			btn.onclick = function(){
				if(index === i) return;
				hide();
				index = i;
				show();
			}
		})
		show();
	}
	function hide(i=index){
		btns[i].className = null;
		divs[i].style.display = "none";
	}
	function show(){
		btns[index].className = "active";
		divs[index].style.display = "block";
	}
	
</script>
</html>